<script lang="ts" setup>
import { reactive, toRefs ,ref, onBeforeMount} from 'vue'
import { pod ,deletepod} from '../../api/pod.js'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import Add from './Add.vue'

//定义数据 ！！！临时数据
const poddata = reactive({
  items: [],
  podAddForm: {
    name: "",
    namespace: "",
    image: "",
  }
})
//默认为Create
const defaultMethod = ref("Create")


//添加按钮状态申明
const addpodDialog = ref(false)


//数据加载过程中页面loading状态，正确状态为ref(true)，为防止loading状态卡住无法测试才设置为false
const loading = ref(false)
// const loading = ref(false)


//实现删除数据方法
const poddelete = (row) =>{
  loading.value = true
  //删除确认弹窗
  ElMessageBox.confirm(
    '确认删除: '+  '命名空间' + row.podnamespace + '下 ' + row.podname,
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(()=>{
      //执行删除操作
      deletepod(row.id).then((response)=>{
        ElMessage({
          message: response.data.message,
          type: 'success'
        })
        //用户删除后自动更新列表
        podlist()
        loading.value = false
      })
    })
}


//实现获取后端pod列表的方法 ！！！需要填写真实接口数据字段
const podlist = () =>{
  loading.value = true;
  pod().then((response)=>{
    poddata.items = response.data.Pod
    loading.value= false
  }).catch((error) => {
    ElMessage({
      message: 'Failed to load pod list',
      type: 'error'
    });
    console.error('Error loading pod list:', error);
  }).finally(() => {
    loading.value = false;
  });
}

const editPod = ()=>{
  defaultMethod.value = "Edit"
  addpodDialog.value = true
}

//添加按钮弹窗方法
const addpod = ()=>{
  defaultMethod.value = "Create"
  addpodDialog.value = true
}

//钩子函数自动加载相关数据
onBeforeMount(()=> {
  podlist()
})

//定义一个关闭弹窗后的触发事件
const closeDialog = ()=>{
  console.log("close Dialog compulete")
  podlist()
}

//解构poddata数据
const { items ,podAddForm } = toRefs(poddata)
// console.log("存储的数据",items)
</script>

<template>
    <el-card v-loading="loading" element-loading-text="Loading..." class="box-card">
    <template #header>
      <div class="card-header">
        <span>Pod列表</span>
        <el-button class="button" text @click="addpod">添加Pod</el-button>
      </div>
    </template>
    <template #footer>Kuberneres Pod 资源展示</template>
    <!-- 与解构出来的items数据做双向绑定 -->
    <el-table :data="items" style="width: 100%" >
      <el-table-column sortable fixed prop="id" label="ID" style="width: 20px" />
      <el-table-column sortable fixed prop="podname" label="容器名称" />
      <el-table-column sortable prop="podnamespace" label="容器命名空间"  />
      <el-table-column sortable prop="status" label="状态"  />
      <el-table-column sortable prop="image" label="镜像" />
      <el-table-column fixed="right" label="操作">
        <template #default="scoped">
          <el-button link type="primary" size="small" @click="editPod">编辑</el-button>
          <el-button link type="warning" size="small" @click="poddelete(scoped.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog 
  destroy-on-close 
  @close="closeDialog" 
  v-model="addpodDialog" 
  :title="defaultMethod=='Create'?'Create Pod':'Update Pod'"
  width="50%"
  >
    <Add :pod-add-form="podAddForm"  @roolback="closeDialog" :method="defaultMethod" ></Add>
  </el-dialog>

</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
